<html>

<head>
    <title>测试下拉</title>
</head>
<link href="boss.selectorSearch.css" rel="stylesheet" />
<script src="boss.selectorSearch.js"></script>

<body>
    <div style="float:left;margin:0px 200px;">
        <select class="form-control valid" id="ProductId" name="ProductId">
            <option value="41">菜毛</option>
            <option value="75">本地菜毛</option>
            <option selected="selected" value="103">菜毛（新联）</option>
            <option value="104">菜毛（文兴行）</option>
            <option value="105">菜毛（优之菜）</option>
        </select>
        <input type="button" onclick="addOption()" value="添加选项"/>
    </div>
    <div >
        <select class="form-control valid" id="ProductId1" name="ProductId1">
            <option value="41">菜毛1</option>
            <option value="75">本地菜毛1</option>
            <option selected="selected" value="103">菜毛（新联）2</option>
            <option value="104">菜毛（文兴行）3</option>
            <option value="105">菜毛（优之菜）4</option>
        </select>
    </div>

</body>
<script>
    let boss;
    window.onload = function () {
        //这个可以在下拉框数据变化后，重新构建下拉数据，在需要的地方调用 boss.afreshBuildItems("ProductId");
        boss = new BossSelectorSearch.init('#ProductId');
        //直接简单使用，有点击选择回调方法
        BossSelectorSearch.init('#ProductId1', { itemClickCallBack: () => { confirm("点击选中处理完后的回调") } });
    }
    function addOption() {
        let select = document.getElementById('ProductId');
        for (let i = 0; i < 10; i++) {
            let item = document.createElement('option');
            item.value = 200 + i;
            item.innerText = "新加菜" + (i + 1);
            select.appendChild(item);
        }
        //重新初始化数据
        boss.afreshBuildItems("#ProductId");
    }
</script>

</html>